import { FC, ReactNode, useState } from 'react'
import styles from './ActionToolTag.module.scss'
import { motion } from 'framer-motion'
import { motionEasing } from '@/config'
import { useColorVar, useStyles } from '@/hooks/styles'

interface IActionToolTag {
  text?: string
  icon?: ReactNode
  onClick?: () => void
}

export const ActionToolTag: FC<IActionToolTag> = ({
  text = '',
  icon,
  onClick,
}) => {
  const c = useColorVar()
  const styleClass = useStyles(styles)
  const [ifHover, setIfHover] = useState<boolean>(false)
  return (
    <motion.div
      {...styleClass(['layout'])}
      onMouseEnter={() => setIfHover(true)}
      onMouseLeave={() => setIfHover(false)}
      animate={{
        width: ifHover ? 'auto' : 34,
        background: ifHover ? c('theme-grey3') : c('white'),
        borderColor: ifHover ? 'rgba(0,0,0,0)' : '#C6C6C6',
      }}
      whileTap={{
        background: '#E8E8E8',
        transition: { ...motionEasing, duration: 0.1 },
      }}
      transition={{ ...motionEasing, duration: 0.3, delay: 0.1 }}
      onClick={() => onClick()}
    >
      <div {...styleClass(['icon-wrapper'])}>{icon}</div>
      <motion.div
        {...styleClass(['tag'])}
        initial={{ x: -5, opacity: '0%' }}
        animate={{ x: ifHover ? 0 : -5, opacity: ifHover ? '100%' : '0%' }}
        transition={{ ...motionEasing, duration: 0.3, delay: 0.1 }}
      >
        {text}
      </motion.div>
    </motion.div>
  )
}

/* export const ChatAction: FC<IActionToolTag> = ({
  text = '',
  icon,
  onClick,
}) => {
  const iconRef = useRef<HTMLDivElement>(null)
  const textRef = useRef<HTMLDivElement>(null)
  const [width, setWidth] = useState({
    full: 16,
    icon: 16,
  })

  const updateWidth = () => {
    if (!iconRef.current || !textRef.current) return
    const getWidth = (dom: HTMLDivElement) => dom.getBoundingClientRect().width
    const textWidth = getWidth(textRef.current)
    const iconWidth = getWidth(iconRef.current)
    setWidth({
      full: textWidth + iconWidth,
      icon: iconWidth,
    })
  }

  return (
    <div
      className={`${styles['chat-input-action']} clickable`}
      onClick={() => {
        onClick()
        setTimeout(updateWidth, 1)
      }}
      onMouseEnter={updateWidth}
      onTouchStart={updateWidth}
      style={
        {
          '--icon-width': `${width.icon}px`,
          '--full-width': `${width.full}px`,
        } as React.CSSProperties
      }
    >
      <div ref={iconRef} className={styles['icon']}>
        {icon}
      </div>
      <div className={styles['text']} ref={textRef}>
        {text}
      </div>
    </div>
  )
} */
